<!--
* @description:物资统计
* @fileName: MaterialStatistics
* @author:孟帅龙
* @date:2021-1-14
* @后台人员:孟帅龙
-->
<template>
  <div>
    <!-- 物资统计 -->
    <div class="wztjselect">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="货物名称：">
          <el-input v-model="GoodsName" placeholder="请输入货物名称"></el-input>
        </el-form-item>
        <el-form-item label="材质：">
          <el-select v-model="Texture" placeholder="请选择材质">
            <el-option
              v-for="item in caizhi"
              :key="item.value"
              :label="item.DictionaryName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产地:">
          <el-col :span="11">
            <el-form-item>
              <el-select
                v-model="Nationw"
                placeholder="请选择国家"
                @change="loadProvince"
              >
                <el-option
                  v-for="item in country"
                  :key="item.value"
                  :label="item.CountryName"
                  :value="item.Id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item>
              <el-select v-model="Province" placeholder="请选择省/州">
                <el-option
                  v-for="item in province"
                  :key="item.value"
                  :label="item.CountryName"
                  :value="item.Id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="统计区间：">
          <el-date-picker
            type="date"
            placeholder="请选择开始日期"
            v-model="BeginTime"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="至">
          <el-date-picker
            type="date"
            placeholder="请选择截止日期"
            v-model="EndTime"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button @click="loadReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="wztjtable">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="GoodsName" label="货物名称"> </el-table-column>
        <el-table-column prop="FName" label="类型"> </el-table-column>
        <el-table-column prop="EName" label="材质"> </el-table-column>
        <el-table-column prop="Specification" label="规格"> </el-table-column>
        <el-table-column label="产地">
          <template slot-scope="scope">
            {{ scope.row.CName }}-{{ scope.row.DName }}
          </template>
        </el-table-column>
        <el-table-column prop="BuyerAmount" label="期间采购数量">
        </el-table-column>
        <el-table-column prop="ReceiveAmount" label="期间领用数量">
        </el-table-column>
        <el-table-column prop="SurplusAmount" label="期末结余数量">
        </el-table-column>
        <!-- <el-table-column label="开始日期">
          <template slot-scope="scope">
            {{ scope.row.BeginTime.substr(0,10) }}
          </template>
        </el-table-column>
        <el-table-column label="结束日期">
          <template slot-scope="scope">
            {{ scope.row.EndTime.substr(0,10) }}
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="wztjpage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      GoodsName: "",
      Texture: 0,
      Nationw: 0,
      Province: 0,
      BeginTime: "",
      EndTime: "",
      caizhi: [],
      country: [],
      province: [],
      tableData: [],
      pageindex: 1,
      pagesize: 3,
      totalcount: 0,
    };
  },
  methods: {
    loadData() {
      this.$axios
        .get(
          "https://localhost:44399/api/app/material-statistics/material-statistics-page-show",{params:{
            GoodsName:this.GoodsName,
            Texture:this.Texture,
            Nationw:this.Nationw,
            Province:this.Province,
            BeginTime:this.BeginTime,
            EndTime:this.EndTime,
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          }}
        )
        .then((res) => {
          this.tableData = res.data.PageData;
          this.totalcount = res.data.PageTotal;
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.loadData();
    },
    //重置
    loadReset() {
      this.GoodsName = "";
      this.Texture = 0;
      this.Nationw = 0;
      this.Province = 0;
      this.BeginTime = "";
      this.EndTime = "";
      this.loadData();
    },
    loadDictionary() {
      this.$axios
        .get("https://localhost:44399/api/app/oil-cost/bind")
        .then((res) => {
          let d = res.data.PageData;
          this.caizhi = d.filter((u) => {
            return u.DictionaryType == "Texture";
          });
          this.caizhi.unshift({ Id: 0, DictionaryName: "请选择" });
        });
    },
    loadCountry() {
      this.$axios
        .get("https://localhost:44399/api/app/country/0/country-show")
        .then((res) => {
          this.country = res.data.PageData;
          this.country.unshift({ Id: 0, CountryName: "请选择" });
        });
    },
    loadProvince() {
      this.$axios
        .get(
          "https://localhost:44399/api/app/country/" +
            this.Nationw +
            "/country-show"
        )
        .then((res) => {
          this.province = res.data.PageData;
          this.country.unshift({ Id: 0, CountryName: "请选择" });
        });
    },
  },
  created() {
    this.loadData();
    this.loadDictionary();
    this.loadCountry();
  },
};
</script>

<style>
</style>